/* 登录页思路分析
1.切换登录与注册盒子
2.登录功能
3.注册功能
*/

/* 1.切换登录与注册盒子 */
//1.1 点击登录的a,切换到注册
document.querySelector('.login a').addEventListener('click',function(){
  //显示注册盒子
  document.querySelector('.register').style.display = 'block'
  //隐藏登录盒子
  document.querySelector('.login').style.display = 'none'
})
//1.2 点击注册的a,切换到登录
document.querySelector('.register a').addEventListener('click',function(){
  //显示注册盒子
  document.querySelector('.login').style.display = 'block'
  //隐藏登录盒子
  document.querySelector('.register').style.display = 'none'
})


/* 2.登录功能: form表单按钮需要阻止表单默认跳转
2.1 获取表单文本,注意登陆和注册的输入框name相同,注意别混淆
2.2 非空判断
2.3 正则校验 6-15位
2.4 ajax发送登录请求
*/
document.querySelector('.login button').addEventListener('click',function(e){
  //阻止表单默认跳转
  e.preventDefault()
  //2.1 获取表单文本,注意登陆和注册的输入框name相同,注意别混淆
  let username = document.querySelector('.login [name = "username"]').value
  let password = document.querySelector('.login [name = "password"]').value
  //2.2 非空判断
  let formList = document.querySelectorAll('.login input')
  if(Array.from(formList).some(item => item.value == '')){
    return Toast.fail('输入框不能为空')
  }
  // 2.3 正则校验 6-15位
  if(Array.from(formList).some(item => !/^\w{6,15}$/.test(item.value))){
    return Toast.fail('账号密码必须是6-15位')
  }
  //2.4 ajax发送登录请求
  axios({
    url:'/api/login',
    method:'post',
    data: { username,password},
  }).then(res=>{
    //成功回调
    console.log(res)
    if(res.data.code == 0){
      Toast.success('登录成功')
      localStorage.setItem('myToken',res.data.token)
      location.href = `./index.html`
    }else{
      Toast.info(res.data.message)
    }
  })
})


/* 3.注册功能: form表单按钮需要阻止表单默认跳转
2.1 获取表单文本,注意登陆和注册的输入框name相同,注意别混淆
2.2 非空判断
2.3 正则校验 6-15位
2.4 ajax发送登录请求
*/
document.querySelector('.register button').addEventListener('click',function(e){
  //阻止表单默认跳转
  e.preventDefault()
  //2.1 获取表单文本,注意登陆和注册的输入框name相同,注意别混淆
  let username = document.querySelector('.register [name = "username"]').value
  let password = document.querySelector('.register [name = "password"]').value
  //2.2 非空判断
  let formList = document.querySelectorAll('.register input')
  if(Array.from(formList).some(item => item.value == '')){
    return Toast.fail('输入框不能为空')
  }
  // 2.3 正则校验 6-15位
  if(Array.from(formList).some(item => !/^\w{6,15}$/.test(item.value))){
    return Toast.fail('账号密码必须是6-15位')
  }
  //2.4 ajax发送登录请求
  axios({
    url:'/api/register',
    method:'post',
    data: { username,password},
  }).then(res=>{
    //成功回调
    console.log(res)
    if(res.data.code == 0){
      Toast.success('注册成功')
      //切换登录盒子
      document.querySelector('.register a').click()
      //重置表单
      document.querySelector('.register form').reset()
    }else{
      Toast.info(res.data.message)
    }
  })
})

